<template>
  <el-card style="max-width: 100%">
    <template #header>
      <div class="card-header">
        <span>购物车首页</span>
        <div class="header-btns">
          <el-button type="primary" @click="$router.push('/')">商品列表</el-button>
          <el-button type="primary" @click="$router.push('/shopCart')">购物车</el-button>
        </div>
      </div>
    </template>
    <router-view />
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
import { RouterView } from 'vue-router'

</script>

<style lang="scss" scoped>
.el-card {
  margin: 0 auto;

  .card-header {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
  }

  .header-btns {
    margin-top: 10px;
  }
}
</style>
